<template>
	<view id="login">
		<view class="logo-box"></view>
		<view class="inp-outer">
			<view class="flex justify-center">
				<image src="/static/xyc/logo.png" class="logo"></image>
			</view>
			<view class="m-t-180">
				<view class="inp">
					<input type="text" class="flex-1" placeholder="请输入手机号码" maxlength="11" v-model="mobile" />
				</view>
				<view class="inp password" v-if="loginType == 'password'">
					<input type="password" placeholder="请输入登录密码" v-model="psw" />
				</view>
				<view class="inp password" v-if="loginType == 'captcha'">
					<input type="text" placeholder="请输入验证码" v-model="code" style="width:60%" />
					<view class="yzm">
						<text v-show="show" @click="onCode">获取验证码</text>
						<text v-show="!show">重新获取({{count}})</text>
					</view>
				</view>
			</view>
			<view class="remember m-t-40 m-b-40 flex justify-between">
				<view>
					<checkbox-group>
						<label @tap="read" class="flex align-center font-26 color-b">
							<checkbox style="transform:scale(0.7)" value="cb" :checked="agreementBool" color="#FFAC34" />
							<text>
								<text>我已阅读并同意</text>
								<text class="agreement text-decoration" @click.stop="toNotice()">《隐私政策》</text>
							</text>
						</label>
					</checkbox-group>
				</view>
				<view class="flex-1 flex justify-end">
					<checkbox-group @change="rememberPsw">
						<label class="flex align-center font-26 color-b">
							<checkbox style="transform:scale(0.7)" value="cb" :checked="rememberType" color="#FFAC34" />
							<text>记住密码</text>
						</label>
					</checkbox-group>
				</view>
			</view>
			<view class="btn bg-yellow m-t-30">
				<button @click="toLogin()">登录</button>
			</view>
			<view class="flex justify-between w-87 m-t-50 centerBox font-26 color-b">
				<view @click="toResetPassword">忘记密码?</view>
				<view class="to-righter font-26" @click="toRegister" v-if="!refereeCode">
					还没账号？去 <text class="primary">注册</text>
				</view>
			</view>
			<view class="to-righter font-28" @click="toDownload" v-if="refereeCode">
				<text class="primary underLine">立即下载App</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		login
	} from '@/common/api/api.js'
	import {
		customerInfo
	} from '@/common/api/customer.js'
	import {
		newSendCode,
		lastVersion
	} from '@/common/api/api.js'
	// #ifdef APP-PLUS || H5
	import {
		checkLogin
	} from "../TUIKit/utils/checkLogin";
	// #endif

	import uniLink from './components/uni-link.vue'

	export default {
		components:{
			uniLink
		},
		data() {
			return {
				mobile: '',
				psw: '',
				rememberType: false,
				selectZoneNumber: '86', //归属地编号
				loginTxt: '密码登录',
				loginType: 'password', //password：密码，mobile：手机号登录
				code: '',
				show: true,
				count: '',
				timer: null,
				checkCode: '',
				type: 1,
				downloadUrl: null,
				refereeCode: null,//如果是扫码进来的，注册完成之后跳到登陆页之后，需要展示下载app，否则显示还没账号去注册
				showText: null,
				vercode:null,//邀请码
				agreementBool: false,
			};
		},
		onShow() {
			if (this.$store.state.user.mobile && this.$store.state.user.psw) {
				this.rememberType = true
				this.mobile = this.$store.state.user.mobile
				this.psw = this.$store.state.user.psw
			}
			let bool = uni.getStorageSync('agreementBool')
			if(bool){
				this.agreementBool = true
			}
			
		},
		onLoad(options) {
			if(options.invitationCode){
				this.vercode = options.invitationCode
			}
		},
		methods: {
			toNotice() {
				uni.navigateTo({
					url: "/pages/my/privacyPolicy"
				})
			},
			read() {
				this.agreementBool = !this.agreementBool
			},
			// 获取服务端版本号
			getServerNo(version, isPrompt = false, callback) {
				lastVersion(1).then(res => {
					if(res.code == 200){
						this.downloadUrl = res.data.downloadUrl;
					}
				})
			},
			toDownload(){
				window.location.href = this.downloadUrl;
			},
			toResetPassword() {
				uni.navigateTo({
					url: '/pages/my/setting/resetPassword'
				})
			},
			toRegister() {
				if(this.vercode){
					uni.navigateTo({
						url: '/pages/login/register?invitationCode='+this.vercode
					})
				}else{
					uni.navigateTo({
						url: '/pages/login/register'
					})
				}
			},
			rememberPsw() {
				this.rememberType = !this.rememberType
			},
			toLogin() {
				if (!this.mobile || this.mobile.length != 11) {
					return this.$msg('请正确输入11位数手机号码')
				}
				if (!this.psw) {
					return this.$msg('请输入登录密码')
				}
				if(!this.agreementBool){
					return this.$msg('请先阅读并同意隐私政策')
				}
				uni.showLoading({
					title: '登录中',
					mask: true
				})
				login({
					loginId: this.mobile,
					loginType: 'password',
					password: this.psw,
				}).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						this.$msg('登录成功')
						uni.setStorageSync('toastInfo',true)//个人中心弹窗控制，登录后只能弹出一次
						uni.setStorageSync('agreementBool',true)//缓存隐私协议同意，避免写一次还需要再同意
						if(window.sdkManagerGlobal){							
							window.sdkManagerGlobal.isAgreePrivacyProtocol(1)
						}
						uni.removeStorageSync('refereeCode')
						if (this.loginType == 'password') {
							// 记住密码
							this.$store.commit('user/setPsw', {
								mobile: this.rememberType ? this.mobile : '',
								psw: this.rememberType ? this.psw : '',
							})
						}
						// 是否登陆
						this.$store.commit('user/setIsLogin', true)
						this.$store.commit('setLogin', {
							token: res.data.token
						})
						customerInfo().then(async res => {
							this.$store.commit('user/setUserInfo', res.data || {})
							uni.switchTab({
								url: '/pages/index/index'
							})
						})
					} else {
						this.$msg(res.msg)
					}
				}).catch(err=>{
					uni.hideLoading()
				})
			},
			tipsClick(){

			},
			onCode() {
				if (!this.mobile) {
					return this.$msg('请输入手机号码')
				}
				if (this.mobile.length != 11) {
					return this.$msg('请输入11位数手机号码')
				}
				newSendCode({
					mobile: this.mobile,
					type: 6,
				}).then(res => {
					if (res.code == 200) {
						this.time()
						this.$msg(res.msg)
					} else {
						this.$msg(res.msg)
					}
				})
			},
			time() {
				const TIME_COUNT = 180
				if (!this.timer) {
					this.count = TIME_COUNT
					this.show = false
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count--
						} else {
							this.show = true
							clearInterval(this.timer)
							this.timer = null
						}
					}, 1000)
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	::v-deep .uni-input-placeholder {
		font-size: 26rpx !important;
	}

	.underLine{
		font-weight: bold;
	}
	.logo{
		width: 170rpx;
		height: 170rpx;
		border-radius: 10rpx;
	}
	.centerBox{
		margin: 50rpx auto;
	}
	.w-87{
		width: 87%;
	}
	#login {
		background-image: url('/static/xyc/bggg.png');
		background-size: 100% 100%;
		width: 100%;
		height: 100vh;

		.login {
			display: block;
			width: 60rpx;
			height: 100rpx;
			margin: 20upx 0;
		}

		.logo-box {
			width: 100%;
			height: 200rpx;
			text-align: center;
			box-sizing: border-box;
			text-align: left;
			display: flex;
			justify-content: center;
			align-items: center;

			.title {
				display: none;
				font-weight: bold;
				font-size: 60rpx;
				color: #fff;
				.primary {
					color: #00D9C7;
				}
			}

			.desc {
				font-size: 30rpx;
				color: #E55CC6;
			}

			image {
				width: 125rpx;
				height: 125rpx;
			}
		}

		.inp-outer {
			width: 100%;
			height: calc(100vh - 170px);
			box-sizing: border-box;
			margin: 0 auto;
			padding: 0 0;
			border-top-right-radius: 20rpx;
			border-top-left-radius: 20rpx;

			.inp-outer-welcome {
				width: 90%;
				margin: 0 auto;
				color: #333333;
				margin-bottom: 44rpx;

				text {
					font-size: 24rpx;
				}

				.title {
					font-size: 50rpx;
					font-weight: 800;
				}
			}
		}

		.inp {
			width: 90%;
			margin: 0 auto;
			height: 100rpx;
			line-height: 100rpx;
			background: #F2F2F2;
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;
			text-indent: 1em;
			border-radius: 10rpx;

			input {
				border: none;
				outline: none;
				width: 100%;
				height: 100%;
				border-radius: 5rpx;
			}
		}

		.password {
			justify-content: space-between;
			.forget {
				font-size: 24rpx;
				color: #999;
				margin-right: 20rpx;
			}
		}

		.btn {
			margin: 80rpx auto 30rpx;
			width: 656rpx;
			height: 98rpx;
			border-radius: 14rpx;

			button {
				background: #ECA52B;
				display: block;
				width: 100%;
				height: 100%;
				color: #fff;
				font-size: 30upx;
				border: none;
				outline: none;
				text-align: center;
				line-height: 98rpx;
				border-radius: 14rpx;

				&::after {
					border: none;
				}
			}
		}

		.remember {
			width: 92%;
			margin: 60rpx auto;
			// display: flex;
			// justify-content: space-between;
			color: #999;
			font-size: 24rpx;

			.left {

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
					vertical-align: middle;
				}
			}
		}

		.to-righter {
			display: flex;
			justify-content: center;
			color: #000;
			text {
				color: #ECA52B;
			}
		}
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.yzm {
		color: #BABABA;
		border-radius: 16upx;
		display: inline-block;
		padding: 10upx 10upx;
		text-align: center;
		font-size: 24upx;
		text-indent: 0;
		margin-right: 20rpx;
	}

	.other-login {
		margin-top: 70rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		view {
			width: 30%;
			display: flex;
			justify-content: space-around;
			margin-top: 30rpx;
		}

		image {
			width: 76rpx;
			height: 76rpx;
		}
	}
	.upgrade-box {
		width: 600rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;

		.content-box {
			width: 100%;
			height: 828rpx;
			position: relative;
			z-index: 1;
			
			.boxTips{
				margin-top: 420rpx;
			}

			.upgrade-box-bg {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
			}

			.date {
				position: absolute;
				top: 280rpx;
				font-size: 60rpx;
			}
			.datas{
				margin-top: 350rpx;
			}

			.title {
				color: #000;
			}

			.takeaway {
				font-size: 50rpx;
				color: #ED6400;
				font-weight: bold;
			}



			.content {
				overflow: auto;
				box-sizing: border-box;
				padding: 0 40rpx;
				margin-top: 400rpx;
				line-height: 40rpx;
			}

			.btnss {
				border-radius: 30rpx;
				padding: 14rpx 58rpx;
				width: max-content;
				color: #fff;
				margin: 20rpx auto 20rpx auto;
			}

			.btn-box {
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;

				>view {
					border-radius: 30rpx;
					padding: 12rpx 50rpx;
				}

				.btn {
					margin: 0;
				}

				.btn-border {
					border: 1px solid #ee3700;
					color: #ee3700;
				}
				.boxR{
					border-radius: 10rpx
				}
			}
			
		}
		.content-box1{
			height: 912rpx !important;
		}
	}
</style>
